<template>
	<div class="design-table-component" @click.stop="onClickHandler"
		:class="[selected ?'design-table-component-selected' : 'design-table-component']">
		<i class="el-icon-s-grid" style="position: absolute;right: 0px;top:-6px;" @click="onIconClickHandler"></i>
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<slot></slot>
		<el-dialog v-model="dialogVisible" title="配置" width="85%">
			<el-table stripe border show-overflow-tooltip="true" :data="columnConfigList" style="width: 100%"
				size="mini" max-height="250">
				<el-table-column label="列名" prop="columnName">
				</el-table-column>
				<el-table-column label="名称" prop="name">
				</el-table-column>
				<el-table-column label="数据类型" prop="viewType">
					<template v-slot="scope">
						<el-select v-model="scope.row.viewType" placeholder="请选择" size="mini" v-if="!editable">
							<el-option v-for="item in readOnlyViewTypeList" :key="item.value" :label="item.name"
								:value="item.value">
							</el-option>
						</el-select>
						<el-select v-model="scope.row.viewType" placeholder="请选择" size="mini" v-else>
							<el-option v-for="item in viewTypeList" :key="item.value" :label="item.name"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="选择" prop="selected">
					<template v-slot="scope">
						<el-checkbox v-model="scope.row.selected" style="height: 24px;"></el-checkbox>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" size="mini" @click="onColumnConfigOk">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import constants from '@/utils/constants.js';
	import shareData from '@/utils/shareData.js';
	import TableResetColumnCommand from '../command/TableResetColumnCommand.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignTableComponent",
		props: [
			"componentModel"
		],
		data() {
			return {
				dialogVisible: false,
				readOnlyViewTypeList: [{
						"value": "label",
						"name": "标签"
					},
					{
						"value": "switch",
						"name": "Switch"
					},
					{
						"value": "tag",
						"name": "Tag"
					}
				],
				editable: false,
				columnConfigList: [],
				selected: false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label"
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					},
					{
						"key": "varName",
						"label": "变量名",
						"editor": "text"
					},
					{
						"key": "halfEditable",
						"label": "半编辑",
						"editor": "checkbox"
					},
					{
						"key": "editable",
						"label": "可编辑",
						"editor": "checkbox"
					},
					{
						"key": "pageable",
						"label": "分页",
						"editor": "checkbox"
					},
					{
						"key": "onPagination",
						"label": "分页事件",
						"editor": "textarea"
					},
					{
						"key": "multiSelect",
						"label": "多选",
						"editor": "checkbox"
					},
					{
						"key": "formViewPageCode",
						"label": "表单视图",
						"editor": "textarea"
					},
					{
						"key": "onSort",
						"label": "排序事件",
						"editor": "textarea"
					}
				],
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			this.viewTypeList=shareData.viewTypeList;
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.componentClickHandler(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
			},
			onIconClickHandler() {
				var dataSource = this.getPropertyValue("dataSource");
				if (dataSource == undefined || dataSource == "") {
					this.$alert("请选择数据源", "提示");
					return;
				}
				this.columnConfigList = [];
				var editable = this.getPropertyValue("editable");
				if (editable == undefined) {
					editable = false;
				}
				this.editable = editable;
				var dataSourceList = this.$store.state.formDesigner.$refs.dataSourceConfig.datasourceList;
				var tableName;
				for (var i = 0; i < dataSourceList.length; i++) {
					if (dataSourceList[i].id == dataSource) {
						tableName = dataSourceList[i].tableName;
						break;
					}
				}
				var that = this;
				this.axios.get(constants.ROOT_URL + "devformdesigner/initColumnConfig?tableName=" + tableName +
					"&editable=" + editable).then(
					function(response) {
						if (response.data.code == 1) {
							that.columnConfigList = response.data.columnConfigList;
						}
					});
				this.dialogVisible = true;
			},
			onColumnConfigOk() {
				this.dialogVisible = false;
				var dataSource = this.getPropertyValue("dataSource");
				var dataSourceList = this.$store.state.formDesigner.$refs.dataSourceConfig.datasourceList;
				var tableName;
				for (var i = 0; i < dataSourceList.length; i++) {
					if (dataSourceList[i].id == dataSource) {
						tableName = dataSourceList[i].tableName;
						break;
					}
				}
				var children = [];
				formDesignerUtil.clearChildren(this.componentModel);
				for (i = 0; i < this.columnConfigList.length; i++) {
					if (this.columnConfigList[i].selected == true) {
						this.$store.state.formDesigner.createContext.currentComponentId++;
						var column = {
							"type": "tablecolumn",
							"title": this.columnConfigList[i]["name"],
							"id": "component" + this.$store.state.formDesigner.createContext.currentComponentId,
							"propertyMap": {},
							"children": []
						}
						children.push(column);
						this.$store.state.formDesigner.createContext.currentComponentId++;
						var field = {
							"type": this.columnConfigList[i]["viewType"],
							"id": "component" + this.$store.state.formDesigner.createContext.currentComponentId,
							"propertyMap": {"dataSource": dataSource,"dataField": this.columnConfigList[i]["columnName"]},
							"children": [],
							"labelExpression": this.columnConfigList[i]["name"]
						}
						if(this.editable){
							field["noLabel"]=true;
						}
						column.children.push(field);
					}
				}
				if (!this.editable) {
					this.$store.state.formDesigner.createContext.currentComponentId++;
					column = {
						"type": "tablecolumn",
						"title": "操作",
						"id": "component" + this.$store.state.formDesigner.createContext.currentComponentId,
						"propertyMap": {},
						"children": []
					}
					children.push(column);
					this.$store.state.formDesigner.createContext.currentComponentId++;

					var row = {
						"type": "row",
						"id": "component" + this.$store.state.formDesigner.createContext.currentComponentId,
						"propertyMap": {},
						"children": []
					}
					column.children.push(row);
					this.$store.state.formDesigner.createContext.currentComponentId++;

					var editIcon = {
						"type": "icon",
						"id": "component" + this.$store.state.formDesigner.createContext.currentComponentId,
						"iconClass": "el-icon-edit",
						"propertyMap": {
							"onClickExpression": "@listViewPageBean.dataEdit('" + tableName + "_formview" + "')",
							"cssStyleExpression": "color:green;"
						},
						"children": [],
					}
					row.children.push(editIcon);
					this.$store.state.formDesigner.createContext.currentComponentId++;
					var deleteIcon = {
						"type": "icon",
						"id": "component" + this.$store.state.formDesigner.createContext.currentComponentId,
						"iconClass": "el-icon-delete",
						"propertyMap": {
							"onClickExpression": "@listViewPageBean.dataDelete()",
							"confirmMessage": "确认要删除吗?"
						},
						"children": [],
					}
					row.children.push(deleteIcon);
				}
				this.$nextTick(function() {
					var command=new TableResetColumnCommand();
					command.setTableComponentModel(this.componentModel);
					command.setTableChildrenModel(children);
					command.execute();
				});
			}
		}
	}
</script>

<style>

</style>
